<template>
  <div class="Analyze">
    <el-select
      size="large"
      v-model="studentSelect"
      placeholder="请选择学生"
      @change="handleSelectStudent"
      style="width: 300px; margin: 20px 0 50px 0"
    >
      <el-option
        v-for="item in studentInfo"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
    <div class="echart">
      <div ref="chartContainer" style="width: 600px; height: 400px"></div>
      <div ref="chartContainer2" style="width: 600px; height: 400px"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ref, onMounted, nextTick, watch } from 'vue'
import { reqTeacherGetStudent } from '@/api/teacher'

// echarts的ref
const chartContainer = ref(null)
const chartContainer2 = ref(null)
const chart = ref([60, 73, 85, 40, 54])
const chart1 = ref([
  { name: 'c语言', max: 100 },
  { name: 'java', max: 100 },
  { name: 'web前端', max: 100 },
  { name: '软件测试', max: 100 },
  { name: '中国近代史', max: 100 },
])
const chart2 = ref([760, 52, 200, 334])
const studentInfo = ref<any>([])
const studentSelect = ref<any>('')

let myChart1: any = null
let myChart2: any = null
let wbyData = [60, 73, 85, 40, 54]
let wbyData2 = [
  { name: 'c语言', max: 100 },
  { name: 'java', max: 100 },
  { name: 'web前端', max: 100 },
  { name: '软件测试', max: 100 },
  { name: '中国近代史', max: 100 },
]
let wzhData = [84, 68, 77, 63]
let wzhData2 = [
  { name: '管理学基础', max: 100 },
  { name: '机器学习基础', max: 100 },
  { name: '西方艺术史', max: 100 },
  { name: '软件需求分析与设计', max: 100 },
]

// 图标渲染
const initCharts = () => {
  if (chartContainer.value) {
    myChart1 = echarts.init(chartContainer.value)
    const option1 = {
      title: {
        text: '学生成绩分析',
      },
      tooltip: {
        trigger: 'axis',
      },
      radar: [
        {
          indicator: chart1.value,
        },
      ],
      series: [
        {
          type: 'radar',
          tooltip: {
            trigger: 'item',
          },
          areaStyle: {},
          data: [
            {
              value: chart.value,
              name: '学生成绩',
            },
          ],
        },
      ],
    }

    myChart1.setOption(option1)
  }
  if (chartContainer2.value) {
    myChart2 = echarts.init(chartContainer2.value)
    const option2 = {
      title: {
        text: '功能模块使用数',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow',
        },
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: [
            '大模型功能使用数',
            '文本功能使用数',
            '选课功能使用数',
            '面试功能使用数',
          ],
          axisTick: {
            alignWithLabel: true,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
        },
      ],
      series: [
        {
          name: '次数',
          type: 'bar',
          barWidth: '60%',
          data: chart2.value,
        },
      ],
    }
    myChart2.setOption(option2)
  }
}

// 获取学生信息
const teacherGetStudent = async () => {
  const res = await reqTeacherGetStudent()
  if (res.code === 200) {
    !studentSelect.value && (studentSelect.value = res.data[0].username)
    studentInfo.value = res.data.map((item: any) => ({
      value: item.username,
      label: item.username,
    }))
  }
}

const handleSelectStudent = (val: string) => {
  if (val === 'wby') {
    chart.value = wbyData
    chart1.value = wbyData2
    chart2.value = [760, 52, 200, 334]
    return
  }
  chart.value = wzhData
  chart1.value = wzhData2
  chart2.value = [543, 235, 378, 301]
}

onMounted(() => {
  teacherGetStudent()
  nextTick(() => {
    initCharts()
  })
})

watch(
  [chart, chart1],
  ([newChart, newChart1]) => {
    if (myChart1) {
      myChart1.setOption({
        radar: [
          {
            indicator: newChart1,
          },
        ],
        series: [
          {
            data: [
              {
                value: newChart,
                name: '学生成绩',
              },
            ],
          },
        ],
      })
    }
  },
  { deep: true },
)

watch(
  chart2,
  (newVal) => {
    if (myChart2) {
      myChart2.setOption({
        series: [
          {
            data: newVal,
          },
        ],
      })
    }
  },
  { deep: true },
)
</script>

<style lang="scss" scoped>
.Analyze {
  & > .echart {
    display: flex;
    justify-content: space-between;
  }
}
</style>
